<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="shortcut icon" href="/favicon.ico">
    <title>管理员页面</title>
    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./dist/css/jquery.toast.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
      :root {
        --primary-color: #206bc4;
        --secondary-color: #f8f9fa;
        --success-color: #2fb344;
        --danger-color: #d63939;
        --warning-color: #f76707;
        --text-color: #495057;
      }

      body {
        background-color: #f5f7fb;
        color: var(--text-color);
      }

      /* 页面标题样式 */
      .page-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--primary-color);
      }

      /* 卡片样式优化 */
      .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
        background: white;
      }

      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
      }

      .card-header {
        background: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 1.25rem;
      }

      .card-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0;
      }

      /* 表格样式优化 */
      .table {
        margin-bottom: 0;
      }

      .table thead th {
        background-color: var(--secondary-color);
        border-bottom: 2px solid var(--primary-color);
        color: var(--primary-color);
        font-weight: 600;
        padding: 1rem;
      }

      .table tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      }

      .table tbody tr {
        transition: all 0.2s ease;
      }

      .table tbody tr:hover {
        background-color: rgba(32, 107, 196, 0.05);
      }

      /* 按钮样式优化 */
      .btn {
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-weight: 500;
        transition: all 0.3s ease;
      }

      .btn-primary {
        background-color: var(--primary-color);
        border: none;
      }

      .btn-primary:hover {
        background-color: #1a5aa3;
        transform: translateY(-2px);
      }

      .btn-danger {
        background-color: var(--danger-color);
        border: none;
      }

      .btn-danger:hover {
        background-color: #c12c2c;
        transform: translateY(-2px);
      }

      .btn-warning {
        background-color: var(--warning-color);
        border: none;
        color: white;
      }

      .btn-warning:hover {
        background-color: #e05d00;
        transform: translateY(-2px);
      }

      .btn-success {
        background-color: var(--success-color);
        border: none;
      }

      .btn-success:hover {
        background-color: #2aa13a;
        transform: translateY(-2px);
      }

      /* 模态框样式优化 */
      .modal-content {
        border-radius: 12px;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      }

      .modal-header {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 1.25rem;
      }

      .modal-body {
        padding: 1.25rem;
      }

      .modal-footer {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding: 1.25rem;
      }

      /* 表单样式优化 */
      .form-control {
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
      }

      .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.1);
      }

      /* 状态标签样式 */
      .status-badge {
        display: inline-block;
        padding: 0.35rem 0.75rem;
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 500;
      }

      .status-badge.normal {
        background-color: rgba(47, 179, 68, 0.1);
        color: var(--success-color);
      }

      .status-badge.banned {
        background-color: rgba(214, 57, 57, 0.1);
        color: var(--danger-color);
      }

      /* 响应式优化 */
      @media (max-width: 768px) {
        .card-header {
          flex-direction: column;
          gap: 1rem;
        }
        
        .table-responsive {
          margin: 0 -1rem;
        }
        
        .btn {
          width: 100%;
          margin-bottom: 0.5rem;
        }
      }

      /* 滚动条美化 */
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      ::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
      }

      ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: #555;
      }

      /* 搜索框样式优化 */
      .input-group {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
      }

      .input-group:focus-within {
        box-shadow: 0 4px 15px rgba(32, 107, 196, 0.15);
      }

      .input-group .form-control {
        border: none;
        border-radius: 0;
        padding: 0.75rem 1rem;
        background-color: #f8f9fa;
      }

      .input-group .form-control:focus {
        box-shadow: none;
        background-color: white;
      }

      .input-group .btn {
        border: none;
        padding: 0.75rem 1rem;
        background-color: var(--primary-color);
        color: white;
        transition: all 0.3s ease;
      }

      .input-group .btn:hover {
        background-color: #1a5aa3;
      }

      .input-group .btn svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.5;
      }

      /* 卡片头部布局优化 */
      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .card-actions {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      @media (max-width: 768px) {
        .card-header {
          flex-direction: column;
          align-items: stretch;
        }
        
        .card-actions {
          flex-direction: column;
          width: 100%;
        }
        
        .input-group {
          width: 100%;
          max-width: none !important;
        }
        
        .btn {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="page-wrapper">
        <!-- 页面头部 -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <h2 class="page-title">
                  管理员控制台
                </h2>
              </div>
              <div class="col-auto ms-auto">
                <a href="/index.html" class="btn btn-primary">
                  返回首页
                </a>
              </div>
            </div>
          </div>
        </div>
        <!-- 页面内容 -->
        <div class="page-body">
          <div class="container-xl">
            <div class="row row-cards">
              <!-- 板块管理 -->
              <div class="col-12">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">板块管理</h3>
                    <div class="card-actions">
                      <div class="input-group" style="max-width: 300px;">
                        <input type="text" class="form-control" id="board-search" placeholder="搜索板块...">
                        <button class="btn btn-primary" type="button">
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <circle cx="10" cy="10" r="7"></circle>
                            <line x1="21" y1="21" x2="15" y2="15"></line>
                          </svg>
                        </button>
                      </div>
                      <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-add-board">
                        添加板块
                      </a>
                    </div>
                  </div>
                  <div class="table-responsive">
                    <table class="table table-vcenter card-table">
                      <thead>
                        <tr>
                          <th>板块名称</th>
                          <th>帖子数量</th>
                          <th>创建时间</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="board-list">
                        <!-- 板块列表将通过JavaScript动态加载 -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <!-- 用户管理 -->
              <div class="col-12">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">用户管理</h3>
                    <div class="card-actions">
                      <div class="input-group" style="max-width: 300px;">
                        <input type="text" class="form-control" id="user-search" placeholder="搜索用户...">
                        <button class="btn btn-primary" type="button">
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <circle cx="10" cy="10" r="7"></circle>
                            <line x1="21" y1="21" x2="15" y2="15"></line>
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div class="table-responsive">
                    <table class="table table-vcenter card-table">
                      <thead>
                        <tr>
                          <th>用户名</th>
                          <th>昵称</th>
                          <th>帖子数量</th>
                          <th>状态</th>
                          <th>注册时间</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="user-list">
                        <!-- 用户列表将通过JavaScript动态加载 -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <!-- 帖子管理 -->
              <div class="col-12">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">帖子管理</h3>
                    <div class="card-actions">
                      <div class="input-group" style="max-width: 300px;">
                        <input type="text" class="form-control" id="article-search" placeholder="搜索帖子...">
                        <button class="btn btn-primary" type="button">
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <circle cx="10" cy="10" r="7"></circle>
                            <line x1="21" y1="21" x2="15" y2="15"></line>
                          </svg>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div class="table-responsive">
                    <table class="table table-vcenter card-table">
                      <thead>
                        <tr>
                          <th>标题</th>
                          <th>作者</th>
                          <th>所属板块</th>
                          <th>浏览数</th>
                          <th>回复数</th>
                          <th>点赞数</th>
                          <th>状态</th>
                          <th>发布时间</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody id="article-list">
                        <!-- 帖子列表将通过JavaScript动态加载 -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加板块模态框 -->
    <div class="modal modal-blur fade" id="modal-add-board" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加板块</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">板块名称</label>
              <input type="text" class="form-control" id="board-name" name="board-name">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn me-auto" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="add-board-btn">添加</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 导入JS -->
    <script src="./dist/js/jquery-3.6.3.min.js"></script>
    <script src="./dist/js/tabler.min.js"></script>
    <script src="./dist/js/jquery.toast.js"></script>
    <script>
      $(function() {
        // 加载板块列表
        function loadBoardList() {
          $.ajax({
            type: 'GET',
            url: '/board/list',
            success: function(response) {
              if (response.code === 0) {
                let html = '';
                response.data.forEach(function(board) {
                  html += `
                    <tr>
                      <td>${board.name}</td>
                      <td>${board.articleCount}</td>
                      <td>${new Date(board.createTime).toLocaleString()}</td>
                      <td>
                        <button class="btn btn-danger btn-sm delete-board" data-id="${board.id}">删除</button>
                      </td>
                    </tr>
                  `;
                });
                $('#board-list').html(html);
              }
            }
          });
        }

        // 加载用户列表
        function loadUserList() {
          $.ajax({
            type: 'GET',
            url: '/user/list',
            success: function(response) {
              if (response.code === 0) {
                let html = '';
                response.data.forEach(function(user) {
                  html += `
                    <tr>
                      <td>${user.username}</td>
                      <td>${user.nickname}</td>
                      <td>${user.articleCount}</td>
                      <td>${user.state === 0 ? '正常' : '禁言'}</td>
                      <td>${new Date(user.createTime).toLocaleString()}</td>
                      <td>
                        ${user.state === 0 ? 
                          `<button class="btn btn-warning btn-sm ban-user" data-id="${user.id}">禁言</button>` :
                          `<button class="btn btn-success btn-sm unban-user" data-id="${user.id}">解除禁言</button>`
                        }
                        <button class="btn btn-danger btn-sm delete-user" data-id="${user.id}">删除</button>
                      </td>
                    </tr>
                  `;
                });
                $('#user-list').html(html);
              }
            }
          });
        }

        // 加载帖子列表
        function loadArticleList() {
          $.ajax({
            type: 'GET',
            url: '/article/list',
            success: function(response) {
              if (response.code === 0) {
                let html = '';
                response.data.forEach(function(article) {
                  html += `
                    <tr>
                      <td>${article.title}</td>
                      <td>${article.user.nickname}</td>
                      <td>${article.board.name}</td>
                      <td>${article.visitCount}</td>
                      <td>${article.replyCount}</td>
                      <td>${article.likeCount}</td>
                      <td>${article.deleteState === 0 ? '正常' : '已删除'}</td>
                      <td>${new Date(article.createTime).toLocaleString()}</td>
                      <td>
                        ${article.deleteState === 0 ? 
                          `<button class="btn btn-danger btn-sm delete-article" data-id="${article.id}">删除</button>` :
                          `<button class="btn btn-success btn-sm restore-article" data-id="${article.id}">恢复</button>`
                        }
                      </td>
                    </tr>
                  `;
                });
                $('#article-list').html(html);
              }
            }
          });
        }

        // 初始加载
        loadBoardList();
        loadUserList();
        loadArticleList();

        // 添加板块
        $('#add-board-btn').click(function() {
          const boardName = $('#board-name').val();
          if (!boardName) {
            $.toast({
              heading: '警告',
              text: '板块名称不能为空',
              icon: 'warning'
            });
            return;
          }

          $.ajax({
            type: 'POST',
            url: '/board/add',
            data: { name: boardName },
            success: function(response) {
              if (response.code === 0) {
                $.toast({
                  heading: '成功',
                  text: '添加板块成功',
                  icon: 'success'
                });
                $('#modal-add-board').modal('hide');
                $('#board-name').val('');
                loadBoardList();
              } else {
                $.toast({
                  heading: '错误',
                  text: response.message,
                  icon: 'error'
                });
              }
            }
          });
        });

        // 删除板块
        $(document).on('click', '.delete-board', function() {
          const boardId = $(this).data('id');
          if (confirm('确定要删除这个板块吗？')) {
            $.ajax({
              type: 'POST',
              url: '/board/delete',
              data: { id: boardId },
              success: function(response) {
                if (response.code === 0) {
                  $.toast({
                    heading: '成功',
                    text: '删除板块成功',
                    icon: 'success'
                  });
                  loadBoardList();
                } else {
                  $.toast({
                    heading: '错误',
                    text: response.message,
                    icon: 'error'
                  });
                }
              }
            });
          }
        });

        // 禁言用户
        $(document).on('click', '.ban-user', function() {
          const userId = $(this).data('id');
          if (confirm('确定要禁言这个用户吗？')) {
            $.ajax({
              type: 'POST',
              url: '/user/ban',
              data: { id: userId },
              success: function(response) {
                if (response.code === 0) {
                  $.toast({
                    heading: '成功',
                    text: '禁言用户成功',
                    icon: 'success'
                  });
                  loadUserList();
                } else {
                  $.toast({
                    heading: '错误',
                    text: response.message,
                    icon: 'error'
                  });
                }
              }
            });
          }
        });

        // 解除禁言
        $(document).on('click', '.unban-user', function() {
          const userId = $(this).data('id');
          if (confirm('确定要解除该用户的禁言吗？')) {
            $.ajax({
              type: 'POST',
              url: '/user/unban',
              data: { id: userId },
              success: function(response) {
                if (response.code === 0) {
                  $.toast({
                    heading: '成功',
                    text: '解除禁言成功',
                    icon: 'success'
                  });
                  loadUserList();
                } else {
                  $.toast({
                    heading: '错误',
                    text: response.message,
                    icon: 'error'
                  });
                }
              }
            });
          }
        });

        // 删除用户
        $(document).on('click', '.delete-user', function() {
          const userId = $(this).data('id');
          if (confirm('确定要删除这个用户吗？此操作不可恢复！')) {
            $.ajax({
              type: 'POST',
              url: '/user/delete',
              data: { id: userId },
              success: function(response) {
                if (response.code === 0) {
                  $.toast({
                    heading: '成功',
                    text: '删除用户成功',
                    icon: 'success'
                  });
                  loadUserList();
                } else {
                  $.toast({
                    heading: '错误',
                    text: response.message,
                    icon: 'error'
                  });
                }
              }
            });
          }
        });

        // 删除帖子
        $(document).on('click', '.delete-article', function() {
          const articleId = $(this).data('id');
          if (confirm('确定要删除这个帖子吗？')) {
            $.ajax({
              type: 'POST',
              url: '/article/delete',
              data: { id: articleId },
              success: function(response) {
                if (response.code === 0) {
                  $.toast({
                    heading: '成功',
                    text: '删除帖子成功',
                    icon: 'success'
                  });
                  loadArticleList();
                } else {
                  $.toast({
                    heading: '错误',
                    text: response.message,
                    icon: 'error'
                  });
                }
              }
            });
          }
        });

        // 恢复帖子
        $(document).on('click', '.restore-article', function() {
          const articleId = $(this).data('id');
          if (confirm('确定要恢复这个帖子吗？')) {
            $.ajax({
              type: 'POST',
              url: '/article/restore',
              data: { id: articleId },
              success: function(response) {
                if (response.code === 0) {
                  $.toast({
                    heading: '成功',
                    text: '恢复帖子成功',
                    icon: 'success'
                  });
                  loadArticleList();
                } else {
                  $.toast({
                    heading: '错误',
                    text: response.message,
                    icon: 'error'
                  });
                }
              }
            });
          }
        });

        // 搜索板块
        $('#board-search').on('input', function() {
          const searchText = $(this).val().toLowerCase();
          $('#board-list tr').each(function() {
            const boardName = $(this).find('td:first').text().toLowerCase();
            if (boardName.includes(searchText)) {
              $(this).show();
            } else {
              $(this).hide();
            }
          });
        });

        // 搜索用户
        $('#user-search').on('input', function() {
          const searchText = $(this).val().toLowerCase();
          $('#user-list tr').each(function() {
            const username = $(this).find('td:first').text().toLowerCase();
            const nickname = $(this).find('td:nth-child(2)').text().toLowerCase();
            if (username.includes(searchText) || nickname.includes(searchText)) {
              $(this).show();
            } else {
              $(this).hide();
            }
          });
        });

        // 搜索帖子
        $('#article-search').on('input', function() {
          const searchText = $(this).val().toLowerCase();
          $('#article-list tr').each(function() {
            const title = $(this).find('td:first').text().toLowerCase();
            const author = $(this).find('td:nth-child(2)').text().toLowerCase();
            const board = $(this).find('td:nth-child(3)').text().toLowerCase();
            if (title.includes(searchText) || author.includes(searchText) || board.includes(searchText)) {
              $(this).show();
            } else {
              $(this).hide();
            }
          });
        });
      });
    </script>
  </body>
</html>